<template>
  <div>
    <div class="flex-start">
      <el-input
        size="small"
        class="m-l-10"
        placeholder="输入加注站名称"
        style="width: 300px"
        clearable
        v-model="search.queryStr"
      />
      <el-button
        icon="el-icon-search"
        class="m-l-10"
        type="primary"
        size="small"
        @click="query"
        >查询</el-button
      >
    </div>
    <el-table
      class="my-table m-t-20"
      ref="fillingMachineTableListRef"
      v-loading="loading"
      :data="data"
      style="width: 100%"
      border
      height="600"
      :row-key="getKey"
      @selection-change="handleChangeSelection"
      :header-cell-style="{ background: '#eee', color: '#000' }"
    >
      <el-table-column type="selection" width="60" :reserve-selection="true" />
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column prop="macCode" label="加注机编号" min-width="180" />
      <el-table-column label="加注站名称" min-width="180">
        <template v-slot="scope">
          {{ scope.row.siteName | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column label="地址" min-width="180">
        <template>
          <app-address
            show-label
            :init-value="{
              province: provinceCode,
              city: cityCode,
              area: districtCode,
            }"
          />
          <!--                    <app-address show-label :init-value="{province:'340000',city:'340100',area:'340104'}"/>-->
        </template>
      </el-table-column>
      <el-table-column label="总容量（吨）" width="150">
        <template v-slot="scope">{{
          scope.row.totalCapacity | kg2Tons
        }}</template>
      </el-table-column>
      <el-table-column label="理论剩余容量（吨）" width="150">
        <template v-slot="scope">{{
          scope.row.currentCapacity | kg2Tons
        }}</template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @change="query"
    />
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  equals,
  getRecords,
  getTotal,
  isNull,
  listNotEmpty,
  msgError,
} from "@/util/common-util";
import { getPage } from "@/api/business/filling-machine";
import AppAddress from "@/components/business/app-address";

export default {
  name: "rehydration-filling-machine-list",
  components: { AppAddress, AppPagination },
  data() {
    return {
      loading: false,
      data: [],
      search: {
        isCreateSupplementOrder: true,
        partnerId: "",
        queryStr: "",
        clusterId: "",
      },
      total: 0,
      outputSelection: [],
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    getKey(row) {
      return row.id;
    },
    clusterChange(v) {
      this.search.clusterId = v;
      this.query();
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      }
      this.loading = true;
      getPage(_page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    handleChangeSelection(selection) {
      this.outputSelection = selection;
      if (listNotEmpty(this.outputSelection)) {
        const flag = this.outputSelection[0].partnerName;
        for (let item of this.outputSelection) {
          if (!equals(item.partnerName, flag)) {
            return msgError(
              "请选择相同主机厂的加注机，加注机" +
                item.macCode +
                "的主机厂【" +
                (item.partnerName === null ? "-" : item.partnerName) +
                "】与【" +
                (flag === null ? "-" : flag) +
                "】不相同"
            );
          }
        }
      }
    },
    getSelection() {
      return this.outputSelection;
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
